window.onload = function () {
  // 当点击某一个li的时候，该li添加下边线  bottomColor
  var lis = document.querySelectorAll(".aside .nav .nav li");
  var Aa = document.querySelectorAll(".aside .nav .nav li a");
  var oUl = document.querySelectorAll(".aside .nav .nav li ul");
  for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
    lis[i].addEventListener("click", function () {
      for (var j = 0; j < lis.length; j++) {
        lis[j].className = "";
      }
      this.className = "bottomColor";
    });
  }
  // 让a字体改变颜色
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].addEventListener("click", function () {
      for (var i = 0; i < Aa.length; i++) {
        Aa[i].classList.remove("blue");
      }
      this.classList.add("blue");
    });
  }
  // 显示与隐藏
  for (var i = 0; i < Aa.length; i++) {
    Aa[i].onclick = function () {
      var uls = this.nextElementSibling;
      if (getComputedStyle(uls).height == "0px") {
        for (var j = 0; j < oUl.length; j++) {
          oUl[j].style.height = "0px";
        }
        uls.style.height =
          uls.children[0].offsetHeight * uls.children.length + "px";
      } else {
        uls.style.height = "0px";
      }
    };
  }
  //   每日待办内容
  var data = [
    {
      id: 1,
      Item: "体温待监测",
      name: "李思国",
      number: "320729188872318",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 2,
      Item: "监测待解除",
      name: "王大力",
      number: "320729123872318",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 3,
      Item: "体温待监测",
      name: "李思思",
      number: "320729188871237",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 4,
      Item: "监测待解除",
      name: "王六",
      number: "320729188871642",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 5,
      Item: "体温待监测",
      name: "李思佳",
      number: "320729188875312",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 6,
      Item: "监测待解除",
      name: "李海",
      number: "320729188872563",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 7,
      Item: "监测待解除",
      name: "白飞",
      number: "320729188876311",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 8,
      Item: "监测待解除",
      name: "慕雪晴",
      number: "320729188876422",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 9,
      Item: "监测待解除",
      name: "张海迪",
      number: "320729188873574",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 10,
      Item: "监测待解除",
      name: "李芳菲",
      number: "320729188873631",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 11,
      Item: "监测待解除",
      name: "张国焘",
      number: "320729188872318",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 12,
      Item: "监测待解除",
      name: "博浩东",
      number: "320729188872318",
      tel: "17768089879",
      date: "2020-11-12",
    },
    {
      id: 13,
      Item: "监测待解除",
      name: "汪峰",
      number: "320729188872318",
      tel: "17768089879",
      date: "2020-11-12",
    },
  ];
  var page = 1;
  //每页的条数
  var count = 5;
  //获取tbody
  var oTBody = document.querySelector("tbody");
  //获取分页容器
  var oPagination = document.querySelector(".pagination");
  //获取上一页的按钮
  var oPrevBtn = document.querySelector(".prev");
  //获取下一页的按钮
  var oNextBtn = document.querySelector(".next");
  var oResetBtn = document.querySelector(".resetBtn");
  // 获取查看详情按钮
  var oBtn = document.querySelector(".btn-primary");
  //   页面初始化渲染
  function render() {
    oTBody.innerHTML = "";
    var renderArr = data.slice((page - 1) * count, page * count);
    for (var i = 0; i < renderArr.length; i++) {
      var oTr = document.createElement("tr");
      oTr.innerHTML = `
      <td>${renderArr[i].id}</td>
      <td>${renderArr[i].Item}</td>
      <td>${renderArr[i].name}</td>
      <td>
      <button class="btn btn-primary btn btn-primary btn-sm see-btn">查看详情</button>
      <button type="button" class="del btn btn-danger btn-sm">删除</button>
    </td>
      `;
      oTBody.appendChild(oTr);
    }
    var oPageBtn = document.querySelectorAll(".pageBtn");
    for (var i = 0; i < oPageBtn.length; i++) {
      oPagination.removeChild(oPageBtn[i].parentNode);
    }
    for (var i = 1; i <= Math.ceil(data.length / count); i++) {
      var oLi = document.createElement("li");
      oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
      if (i == page) {
        oLi.classList.add("active");
      }
      oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
  }
  render();
  oPagination.addEventListener("click", changePage);
  function changePage() {
    if (event.target.className == "pageBtn") {
      page = event.target.innerText;
      render();
    }
  }
  oPrevBtn.addEventListener("click", prev);
  oNextBtn.addEventListener("click", next);
  function prev() {
    if (page > 1) {
      page--;
      render();
    }
  }
  function next() {
    if (page < Math.ceil(data.length / count)) {
      page++;
      render();
    }
  }
  var id;
  oTBody.addEventListener("click", del);
  function del() {
    if (event.target.className.includes("del")) {
      $("#resetModal").modal("show");
      id = event.target.parentNode.parentNode.children[0].innerText;
    }
  }
  oResetBtn.addEventListener("click", resetPass);
  function resetPass() {
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == id) {
        data.splice(i, 1);
      }
    }
    render();
    $("#resetModal").modal("hide");
  }
  oTBody.addEventListener("click", View);
  function View() {
    if (event.target.className.includes("btn-primary")) {
    }
  }
  // 数据存取
  oTBody.addEventListener("click", seeFn);
  function seeFn() {
    if (event.target.className.includes("see-btn")) {
      var id = event.target.parentNode.parentNode.children[0].innerText - 1;
      var str = JSON.stringify(data[id]);
      localStorage.setItem("username", str);
      location.href = "./FollowPage.html";
    }
  }
};
